<template>
		<view :style="'height:' + height + 'rpx'" class="shadowBox">
			<view class="close" @click="closeAd()">
				<view class="iconfont icon-guanbi"></view>
			</view>
			<view class="ad_card">
				<view class="ad_tip">淘宝/京东/拼多多好物捡漏<br/>长按扫码进群薅羊毛</view>
				<image src="http://1.14.247.152:9797/images/gg.png" mode="aspectFit" show-menu-by-longpress="true"></image>
			</view>
		</view>
</template>

<script>
	export default {
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let pxToRpxScale = 750 / res.windowWidth;
					that.height = res.windowHeight * pxToRpxScale;
				}
			});
		},
		data() {
			return {
				height: 0
			}
		},
		methods:{
			closeAd() {
				this.$emit('closeAd')
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.shadowBox {
		height: 100%;
		width: 100%;
		z-index: 200;
		// background-color: pink;
		position: absolute;
		background: rgba(0, 0, 0, 0.4);
	
	
		.close {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			background-color: pink;
			position: absolute;
			top: 18%;
			right: 6%;
			background: rgba(0, 0, 0, 0.7);
			line-height: 70rpx;
			text-align: center;
	
			.iconfont {
				font-size: 40rpx;
				font-weight: 700;
				color: #E5E5E5;
			}
		}
	
		.ad_card {
			position: absolute;
			width: 640rpx;
			height: 680rpx;
			top: 28%;
			right: 50%;
			margin-right: -320rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			.ad_tip {
				position: absolute;
				height: 80rpx;
				line-height: 60rpx;
				width: 100%;
				padding: 0rpx 38rpx 0rpx 38rpx;
				top: 30rpx;
				text-align: center;
				font-size: 40rpx;
				font-weight: 700;
			}
			image {
				position: absolute;
				width: 100%;
				height: 480rpx;
				bottom: 40rpx;
				// height: 100%;
			}
	
		}
	}
</style>
